<script setup lang="ts">
  import { ref, watch } from 'vue'
  import { useGetWaitCheckCancelOrderService, useCheckCancelOrderService } from './services'
  import { ElMessage } from 'element-plus'

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: () => false,
    },
    orderId: {
      type: String,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'update:modelValue', value: boolean): void
    (e: 'updated'): void
  }>()

  // 弹窗的显示状态
  const visible = ref(props.modelValue)

  // 使用根据工单ID获取待审核取消工单信息服务
  const {
    loading: getWaitCheckCancelOrderLoading,
    info: waitCheckCancelOrderInfo,
    getInfo: getWaitCheckCancelOrderInfo,
  } = useGetWaitCheckCancelOrderService

  // 使用审核取消工单服务
  const { rejectLoading, reject, allowLoading, allow } = useCheckCancelOrderService

  // 审核备注
  const checkRemark = ref('')

  /**
   * 关闭事件
   */
  const onClose = () => {
    visible.value = false
    emits('update:modelValue', visible.value)
  }

  /**
   * 驳回按钮点击事件
   */
  const onRejectClick = async () => {
    if (waitCheckCancelOrderInfo.value) {
      const res = await reject(props.orderId, waitCheckCancelOrderInfo.value.id, checkRemark.value)
      ElMessage({
        type: res.success ? 'success' : 'error',
        message: res.message,
        duration: 5000,
        showClose: true,
        plain: true,
      })
      onClose()
      emits('updated')
    }
  }

  /**
   * 通过按钮点击事件
   */
  const onAllowClick = async () => {
    if (waitCheckCancelOrderInfo.value) {
      const res = await allow(props.orderId, waitCheckCancelOrderInfo.value.id, checkRemark.value)
      ElMessage({
        type: res.success ? 'success' : 'error',
        message: res.message,
        duration: 5000,
        showClose: true,
        plain: true,
      })
      onClose()
      emits('updated')
    }
  }

  /**
   * 取消按钮点击事件
   */
  const onCancelClick = () => {
    checkRemark.value = ''
    onClose()
  }

  watch(
    props,
    async (value) => {
      visible.value = value.modelValue
      if (visible.value) {
        await getWaitCheckCancelOrderInfo(value.orderId)
      }
    },
    { immediate: true },
  )
</script>

<template>
  <div>
    <HDialog
      v-model="visible"
      title="审核取消"
      :loading="getWaitCheckCancelOrderLoading || rejectLoading || allowLoading"
      :width="800"
      @close="onClose"
    >
      <div v-if="waitCheckCancelOrderInfo" class="info">
        <div class="info_item">
          <div class="label">网点名称：</div>
          <div class="value">{{ waitCheckCancelOrderInfo.network }}</div>
        </div>
        <div class="info_item">
          <div class="label">申请人员名称：</div>
          <div class="value">{{ waitCheckCancelOrderInfo.applyEmp }}</div>
        </div>
        <div class="info_item">
          <div class="label">申请时间：</div>
          <div class="value">{{ waitCheckCancelOrderInfo.applyTime }}</div>
        </div>
        <div v-if="waitCheckCancelOrderInfo" class="info_item">
          <div class="label">申请备注：</div>
          <div class="value">{{ waitCheckCancelOrderInfo.applyRemark }}</div>
        </div>
        <div class="info_item">
          <div class="label">审核备注：</div>
          <el-input
            v-model.trim="checkRemark"
            type="textarea"
            maxlength="200"
            show-word-limit
            resize="both"
          />
        </div>
      </div>
      <template #footer>
        <HPlainBgButton type="error" is-modal @click="onRejectClick">驳回</HPlainBgButton>
        <HButton is-modal type="primary" @click="onAllowClick">通过</HButton>
        <HButton is-modal @click="onCancelClick">取消</HButton>
      </template>
    </HDialog>
  </div>
</template>

<style scoped lang="scss">
  :deep(.el-textarea) {
    .el-textarea__inner {
      max-height: 220px;
      overflow: hidden;
    }
  }

  .info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 112px 0 112px;

    .info_item {
      display: flex;
      align-items: flex-start;
      flex: 1;

      .label {
        color: #888;
        white-space: nowrap;
        min-width: 84px;
        text-align: right;
      }

      .value {
        color: #303133;
        min-width: 424px;
        max-width: 424px;
      }

      .label,
      .value {
        font-size: 12px;
      }

      :deep(.el-textarea) {
        .el-textarea__inner {
          width: 100% !important;
          min-height: 75px !important;
          max-height: 160px !important;
        }
      }
    }
  }
</style>
